<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style>
		#box{
			width: 900px;
			height: 600px;
			margin: 0 auto;
			border: 1px solid #999;
			position: relative;
		}

		#nav{
			width: 900px;
			height: 100px;
		}

		#nav div{
			width:298px;
			height: 100px;
			border: 1px solid #ccc;
			float: left;
			text-align: center;
			line-height: 100px;
			font-size: 30px;
		}
	
		#main div{
			width: 898px;
			height: 500px;
			border: 1px solid #333;
			position: absolute;
			text-align: center;
			line-height: 500px;
			font-size: 100px;
			background-color: #fff;
			display: none;
		}



	</style>
</head>
<body>
	<div id="box">
		<div id="nav">
			<div id="n1" style="background-color:#ccc">1</div>
			<div id="n2">2</div>
			<div id="n3">3</div>
		</div>
		<div id="main">
			<div id="m1" style="display: block;">1</div>
			<div id="m2">2</div>
			<div id="m3">3</div>
		</div>
	</div>

	<script>
		var navlist = document.getElementById('nav').getElementsByTagName('div');
		var mainlist = document.getElementById('main').getElementsByTagName('div');



		for(var i = 0; i<navlist.length ; i++){
			(function(i){
				navlist[i].onclick = function(){
					for(var j = 0; j <navlist.length; j++){
						navlist[j].style.backgroundColor = '#fff';
					}

						this.style.backgroundColor = '#ccc';
				
					for(var j = 0; j <mainlist.length; j++){
						mainlist[j].style.display = 'none';
					}

						mainlist[i].style.display = 'block';
			}
			})(i)
		}
	</script>
</body>
</html>